<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>键盘事件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>

    <div id="app">
        回车：
        <input type="text" @keydown.13="handle" />
        <input type="text" @keydown.enter="handle" />
        <input type="text" @keydown.huiche="handle" />

        <br /><br />

        大小写：
        <!-- <input type="text" @keydown.CapsLock="handle" /> -->
        <input type="text" @keydown.caps-lock="handle" />

        <br /><br />

        tab：
        <!-- 按下 tab 键会聚焦到另一个可聚焦的元素上，
        当 keyup 时，当前 input 已经失焦，所以不会触发事件 -->
        <input type="text" @keyup.tab="handle" />
        <input type="text" @keydown.tab="handle" />

        <br /><br />

        系统按键：
        <!-- 按下修饰键，正常触发事件 -->
        <input type="text" @keydown.ctrl="handle" />
        <!-- 按下修饰键的同时，再按下其他键，然后释放其他键，事件才会被触发 -->
        <input type="text" @keyup.ctrl="handle" />
        <!-- 按下修饰键的同时，再按下 y 键，随后释放 y 键，事件才被触发 -->
        <input type="text" @keyup.ctrl.y="handle" />
    </div>

    <script>
        Vue.config.productionTip = false
        Vue.config.keyCodes.huiche = 13 // 给回车键定义别名

        new Vue({
            el: '#app',
            methods: {
                handle(e) {
                    console.log('e:', e)
                }
            }
        })
    </script>

</body>
</html>